import React, { useState, useEffect } from 'react'
import Header from '../../components/Header/Header'
import { SearchBar, Grid, Tag, Tabs, Toast } from 'antd-mobile'
import './detail.less'
import kefu from '../../assets/img/kefu.png'
import shoper from '../../assets/img/shoper.png'
import buycart from '../../assets/img/buycart.png'
import { imgPre } from '../../request/http'
import { Link } from 'react-router-dom'
import { reqinfo, reqcartadd } from '../../request/api'

function Detail(props) {
  const [info, setInfo] = useState({})
  // 创建ref
  const des = React.createRef()

  useEffect(() => {
    let id = props.match.params.id;
    reqinfo({ id }).then(res => {
      if (res.data.code == 200) {
        let list = res.data.list[0]
        setInfo(list)
        // setInfo()是异步的
        // 将info.description 赋值在des.current.innerHTML
        if (info.description && des.current) {
          des.current.innerHTML = info.description
        }
      }
    })
  }, [])

// 点击添加购物车
const addcart=()=>{
  // 获取uid
  let uid =JSON.parse(localStorage.getItem('isLogin')).uid;
  reqcartadd({uid,type:1,goodsid:info.id,num:1}).then(res=>{
      if(res.data.code==200){
        Toast.show({
          content:res.data.msg
        })
      }
  })
 }

  return (

    <div>
      <Header title={info.goodsname} back></Header>
      <div className='detalnav'>
        
        <div className='detailshop'>
          <img src={imgPre + info.img} alt="" />
          <h3>商品名称:{info.goodsname}</h3>
          <p>价格：{info.price} <span>市场价:{info.market_price}</span></p>
          <div ref={des}></div>

        </div>
      </div>

      {/* 底部 */}
      <div className="footers">
        <Grid columns={7} gap={8}>
          <Grid.Item>
            <img src={kefu} alt="" />
          </Grid.Item>
          <Grid.Item>
            <img src={shoper} alt="" />
          </Grid.Item>
          <Grid.Item>
            <img src={buycart} alt="" />
          </Grid.Item>
          <Grid.Item span={2}>
            <span onClick={()=>addcart()}>加入购物车</span>
          </Grid.Item>
          <Grid.Item span={2}>
            <span className='buys'>立即购买</span>
          </Grid.Item>

        </Grid>
      </div>
    </div>
  )
}


export default Detail
